/**
 * Created by zhangyida on 15/12/29.
 */
'use strict';
import {
    Text,
    View,
    ListView,
    Navigator,
    TouchableOpacity,
    Image,
    StyleSheet,
    ScrollView,
    WebView,
    AlertIOS
} from 'react-native';
import React from 'react';
import URL from '../config/server';
import {Utils} from '../config/utils';
import Icon from 'react-native-vector-icons/Ionicons';
var NavigationBarRouteMapper = {
    LeftButton(route, navigator, index, navState) {
        return (
            <TouchableOpacity style={{flex: 1, justifyContent: 'center'}}
                              onPress={() => navigator.parentNavigator.pop()}>
                <View style={{flexDirection:'row',padding:5}}>
                    <Icon name="ios-arrow-back" size={18} color="#ffffff" style={{alignSelf:'center'}} />
                    <Text style={{color: 'white', margin: 3,fontSize:16,marginLeft:10}}>
                        返回
                    </Text>
                </View>
            </TouchableOpacity>
        );
    },
    RightButton(route, navigator, index, navState) {
        return null;
    },
    Title(route, navigator, index, navState) {
        return null;
    }
};

export default class InfoContent extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            loaded: true,
            content: null
        };
    }


    componentDidMount() {
        this._InfoisUnmounted = false;
        //this.fetchData();
    }


    fetchData() {
        var that = this;

        //这里配置调用后台的url
        var API_URL = URL.local + 'note/';
        var PARAMS = this.props.message.mid;
        var REQUEST_URL = API_URL + PARAMS;
        fetch(REQUEST_URL)
            .then((response) => response.json())
            .then((responseData) => {
                this.setState({
                    content: responseData.content,
                    loaded: false
                })
            }).catch(function (e) {
                AlertIOS.alert(
                    '温馨提示',
                    '网络连接错误，请关闭飞行模式或检查您的网络连接。'
                )
            })
            .done();
    }

    renderLoadingView() {
        return (
            <View style={styles.container}>
                <View style={styles.listView}>
                    <Text>
                        正在加载数据，请稍后...
                    </Text>
                </View>
            </View>
        );
    }

    renderScene(route, navigator) {
        return (
            <WebView
                style={styles.main}
                bounces={false}
                startInLoadingState={this.state.loaded}
                scalesPageToFit={true}
                url={URL.local+'viewnote/'+this.props.message.mid}
            />
        );

    }

    render() {
        return (
            <Navigator
                renderScene={this.renderScene.bind(this)}
                navigator={this.props.navigator}
                message={this.props.message}
                navigationBar={
                  <Navigator.NavigationBar
                    style={{backgroundColor: '#e02820', alignItems: 'center'}}
                    routeMapper={NavigationBarRouteMapper}
                  />
                }
            />
        );
    }
}

const styles = StyleSheet.create({
    container: {
        marginTop: 64,
        flex: 1,
        backgroundColor: '#ffffff'
    },
    newstitle: {
        marginTop: 5,
        height: 30,
        width: 200
    },
    Items: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        padding: 3,
        backgroundColor: '#f5f5f9',
        borderBottomWidth: 0.5,
        borderColor: '#dddddd'
    },
    footerload: {
        height: 30,
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: 'row'
    },
    contentView: {
        flex: 1,
        backgroundColor: '#f5f5f9'
    },
    listView: {
        flex: 1,
        backgroundColor: '#f5f5f9',
        justifyContent: 'center',
        alignItems: 'center'
    },
    down: {
        height:44,
        backgroundColor: '#000000',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center'
    },
    bottomText: {
        flex: 1,
        color: '#ffffff',
        textAlign: 'center',
        fontSize: 16
    },
    rightContainer: {
        flex: 1,
        height: 70,
        justifyContent: 'flex-start'
    },
    title: {
        fontSize: 15,
        marginBottom: 8,
        textAlign: 'left'
    },
    mtitle: {
        fontSize: 13,
        color: '#a9a9a9',
        textAlign: 'left'
    },
    thumbnail: {
        width: 100,
        height: 70,
        marginRight: 3,
        resizeMode: Image.resizeMode.stretch
    },
    noticeItem: {
        flex: 1,
        padding: 5,
        flexDirection: 'row',
        borderBottomColor: '#eeeeee',
        borderBottomWidth: 1,
        backgroundColor: '#ffffff'
    },
    //左侧推广图标
    Tuiguang: {
        fontSize: 13,
        borderWidth: 1,
        borderColor: '#e02820',
        color: '#e02820',
        textAlign: 'center',
        borderRadius: 5,
        width: 40,
        height: 25,
        alignSelf: 'center',
        paddingTop: 6,
        marginRight: 5
    },
    //右侧信息
    goodInfo: {
        flex: 1
    },
    goodTit: {
        fontSize: 15,
        fontWeight: '600',
        color: '#000000',
        textAlign: 'left',
        marginTop: 5,
        marginBottom: 5,
        marginRight: 10
    },
    //详情的样式
    main: {
        marginTop: 64,
        flex: 1,
        width:Utils.size.width
    },
    mcontainer:{
        flex:1
    },
    centerText: {
        fontSize: 18
    }
});